// 项目事件
<template>
  <div class="pad-out-box new-table-style relative-box">
    <option-list ref="option" @refresh="refresh"></option-list>
    <el-table v-if="tableData.length > 0" :border="false" stripe :data="tableData">
      <el-table-column align="left" label="事件描述" prop="description" :width="titleWidth">
        <template slot-scope="scope">
          <!-- 1-新增 2-更新
          工作追踪-领导 || 项目事件-员工  creatorProgress
          工作追踪-员工 || 项目事件-领导  processorProgress -->
          <div class="one-line-ellipsis">
            <template v-if="isLeader">
              <span v-if="scope.row.processorProgress == 1" class="add-box margin-right-10">新增</span>
              <span v-if="scope.row.processorProgress == 2" class="update-box padding-right-10">更新</span>
            </template>
            <template v-if="!isLeader">
              <span v-if="scope.row.creatorProgress == 1" class="add-box margin-right-10">新增</span>
              <span v-if="scope.row.creatorProgress == 2" class="update-box padding-right-10">更新</span>
            </template>
            <span>{{ scope.row.description }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="事件类型" prop="workTypeName"> </el-table-column>
      <el-table-column align="left" label="当前状态">
        <template slot-scope="scope">
          <span v-if="scope.row.workStatus == 3">已解决</span>
          <span v-if="scope.row.workStatus == 5">未解决</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="上报人" prop="createUserName"> </el-table-column>
      <el-table-column align="left" label="上报时间" prop="startTime">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text" @click="getInfo(scope.row.primaryKey, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-empty class="margin-top-100" v-else description="暂无数据"></el-empty>
    <Pagination v-if="total > tableData.length" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next" />
    <event-info ref="eventInfo" :isLeader="isLeader" @updateWork="updateWork"></event-info>
    <add-event ref="event" @refresh="refresh"></add-event>
  </div>
</template>
<script>
  import addEvent from './components/addEvent.vue';
  import { apiWorkList } from '../../api/workTrace';
  import eventInfo from './eventInfo.vue';
  import merge from 'webpack-merge';
  import optionList from './components/optionList';
  import workTrace from '../../mixin/workTrace';

  export default {
    mixins: [workTrace],

    data() {
      return {
        tableData: [],
        titleWidth: 0,
        total: 0,
        currentPage: 1,
        pageSize: 10,
        systemType:localStorage.getItem('systemType'),
        isLeader: this.systemType == 'assetManagement' || this.systemType == 'businessBuildingOperate' ? true : false,
      };
    },


    mounted() {
      this.hasInfoKeyDo();
      this.initTitleWidth();
      this.getDataSource();
    },

    methods: {
      async getDataSource(more) {
        let userInfo = JSON.parse(localStorage.getItem('userInfo'));
        let res = await apiWorkList({
          currentPage: more ? this.currentPage : 1,
          createOrProcessorKey: userInfo.key,
          pageSize: this.pageSize,
          workTypeList: [1, 2],
          labelType: 2, //1-工作追踪 2-项目事件
          isLeader: this.isLeader,
          status: this.isLeader ? 1 : null,
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },

      addEvent() {
        this.$refs.event.init();
      },

      //更新工作
      updateWork(model) {
        this.$refs.event.callBackFn(model);
      },

      getInfo(primaryKey, model) {
        if (model && (model.status == 2 || !model.status)) {
          this.updateWork(model);
        } else {
          this.$refs.eventInfo.getDataSource(primaryKey);
          this.$refs.eventInfo.dialogShow = true;
        }
      },

      //添加编辑工作后刷新 key有值代表是编辑后的
      refresh(key) {
        this.getDataSource('more');
        key && this.$refs.eventInfo.getDataSource(key);
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getDataSource('more');
      },

      //从首页滚动事件跳转过来
      hasInfoKeyDo() {
        if (this.$route.query.infoKey) {
          this.getInfo(this.$route.query.infoKey);
          this.$router.replace({
            query: merge(this.$route.query, { infoKey: '' }),
          });
        }
      },

      initTitleWidth() {
        let windowWidth = document.body.offsetWidth;
        if (windowWidth <= 1680) {
          this.titleWidth = 500;
        } else if (1680 < windowWidth && windowWidth <= 1920) {
          this.titleWidth = 900;
        }
      },
    },

    components: { addEvent, eventInfo, optionList },
  };
</script>
<style lang="scss" scoped>
  .add-box {
    font-size: 12px !important;
    padding: 10px;
    color: #3384fe;
    background: rgba($color: #3384fe, $alpha: 0.1);
    border-radius: 3px;
  }
  .update-box {
    font-size: 12px !important;
    padding: 10px;
    color: #f79100;
    background: rgba(247, 145, 0, 0.1);
    border-radius: 3px;
  }
</style>
